<template>
  <div class="index">
    <index>
      <div class="top box utils-relative-zIndex" slot="top">
        <div class="video" id="123" ref="video"></div>
      </div>
      <div class="bottom box utils-relative-zIndex" id="video_" slot="middle">
        <div class="video_item_icon utils-panel-border utils-flex-Justcenter utils-flex-Aligncenter"
          v-for="(item,index) in videoList" :key="index" @click="checkOpen(item.serialNumber)">
          <div class="utils-flex-dir utils-flex-Aligncenter utils-flex-Justcenter">
            <i class="iconfont icon-jiankongjiandu"></i>
            <div style="color: white;" class="text">{{queryInfo.place}}-{{index+1}}号摄像头</div>
          </div>
        </div>
      </div>
    </index>
  </div>
</template>

<script>
  import index from '../index.vue';
  // import base from "@/request/api/base.js"
  import { VIDEO_LIST,VIDEO_RTMP } from "@/assets/config/config.js"
  import { MqttUtil } from '@/utils/MqttUtil.js';
  export default {
    components: {
      index,
    },
    data() {
      return {
        video: {
          container: '#123', // 容器的ID或className
          variable: 'player', // 播放函数名称
          autoplay: false,
          live: true,
          video: "rtmp://192.168.1.125:1935/live/1330bd7b-52a5-42da-afbb-e83fc084904f" // 视频地址
        },
        queryInfo: {
          place: '15304'
        },
        videoList: []
      }
    },
    created() {
      this.initMqtt();
    },
    mounted() {
      console.log(this.$route.path);
    },
    watch: {
      '$route.path': {
        handler(val) {
          this.queryInfo.place = VIDEO_LIST[this.$route.path]
          // this.initVideo()
          console.log(VIDEO_LIST[this.$route.path], this.$route);
          this.getVideoList()
          // console.log(val);
        },
        immediate: true
      }
    },
    methods: {
      initMqtt() {
        this.mqtt = new MqttUtil(`mqtt://${this.mqtt_mixin.url}`);
        this.$utils.util.isStatus(() => {
          this.mqtt.setSubTopic('check_light');
          this.mqtt.subTopic((top, message) => {
            message = JSON.parse(message.toString());
            console.log('接受事件-摄像头');
            this.checkOpen(message.serialNumber)
          });
        }, 'sub');
      },
      async getVideoList() {
        try {
          const { data } = await this.$api.video.getVideoList(this.queryInfo);
          this.videoList = data
          if (data) {
            this.checkOpen(data[0]?.serialNumber)
          }
        } catch (err) {
          console.log(err)
        }
      },
      async getVideo(queryinfo) {
        console.log(queryinfo);
        const { data } = await this.$api.video.getVideo(queryinfo);
        console.log(data);
        this.update(data)
      },
      update(data) {
        var reg = new RegExp(/\/\/([^/:]+:\d*)?/)
        var url = VIDEO_RTMP.match(reg)[1];
        // console.log(url)
        var reg1 = new RegExp(/\d*?\.\d*?\.\d*?\.\d*?:\d+/)
        data.url = data.url.replace(reg1,url)
        this.video.url = data?.url
        console.log(data.url);
        this.initVideo(this.video.url)
      },
      initVideo(url) {
        let video = {
          container: '#123', // 容器的ID或className
          variable: 'player', // 播放函数名称
          autoplay: false,
          live: true,
          loaded: 'loadedHandler',
          video: url // 视频地址
        }
        console.log(video);
        var player = new ckplayer(video);

        function loadedHandler(name) {
          //调用到该函数后说明播放器已加载成功，可以进行部分控制了。此时视频还没有加载完成，所以不能控制视频的播放，暂停，获取元数据等事件
          player.addListener('loadedmetadata', loadedMetaDataHandler); //监听元数据
        }

        function loadedMetaDataHandler(name) {
          player.videoPlay(); //控制视频播放
        }
        // player.videoPlay(); //控制视频播放
      },
      checkOpen(serialNumber) {
        console.log(serialNumber);
        document.getElementById("123").innerHTML = ""
        this.getVideo({ ...this.queryInfo, serialNumber })
        this.$utils.util.isStatus(() => {
          console.log('点击事件-摄像头');
          this.mqtt.pubTopic('check_light', JSON.stringify({ serialNumber }));
        }, 'pub');
      }
    },

  };
</script>

<style lang="less" scoped>
  .index {
    height: 100%;

    .box {
      height: 100%;
      width: 100%;
      // border: 1px dashed blue;
    }

    .top {
      box-sizing: border-box;
      padding: 10px 10px;
      overflow: outo;

      .video {
        height: 100%;
      }
    }

    .bottom {
      padding: 10px;
      position: relative;
      display: grid;
      grid-template-rows: repeat(2, 1fr);
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 20px;

      .video_item_icon {
        width: 100%;

        // background-color: #2BC7F6;
        .iconfont {
          font-size: 50px;
          color: #00ffff;
        }

        .text {
          width: 100%;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }
  }

  @media screen and (max-width: 1200px) {
    #video_ {
      grid-gap: 5px;
      padding: 3px;

      .iconfont {
        font-size: 40px;
      }

      .video_item_icon {
        font-size: 13px;
      }

      .text {
        width: 60px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
</style>
